<template>
  <div :class="$style.root">
    <el-form :inline="true" :model="formQuery" label-position="right" size="mini">
      <div style="padding: 12px 36px 0;">
        <el-descriptions :column="6" :colon="false">
          <el-descriptions-item label="今日待处理">
            <span style="color: #F59A23;font-weight: bold">{{ auditTaskBoard.currentInitNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="今日全部处理">
            <span style="color: #F59A23;font-weight: bold">{{ auditTaskBoard.currentAllNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="今日部分处理">
            <span style="color: #F59A23;font-weight: bold">{{ auditTaskBoard.currentPartNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="待处理">
            <span style="color: #F59A23;font-weight: bold">{{ auditTaskBoard.initNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="全部处理">
            <span style="color: #F59A23;font-weight: bold">{{ auditTaskBoard.allNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="部分处理">
            <span style="color: #F59A23;font-weight: bold">{{ auditTaskBoard.partNum }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <el-row>
        <el-col :span="6">
          <el-form-item label="顶级渠道" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.topChannelCode" placeholder="请选择" style="width: 90%" filterable @change="topChannelChange">
              <el-option v-for="item in topChannelList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="渠道编码" :label-width="labelWidth">
            <channel-tree
              :inputWidth="90"
              :topChannelCode="formQuery.topChannelCode"
              :channels="channels"
              :checkedSize="channels.length"
              :customStyle="{ height: '28px', lineHeight: '28px', fontSize: '12px' }"
              @affirm="affirmChannel"
            ></channel-tree>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.status" placeholder="请选择" style="width: 90%" filterable>
              <el-option v-for="item in statusTypes" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核类型" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.handleType" placeholder="请选择" style="width: 90%" filterable>
              <el-option v-for="item in handleTypes" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="所属蜂窝" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.cellularCode" placeholder="请选择" style="width: 90%" filterable>
              <el-option v-for="item in cellulars" :key="item.cellularCode" :label="item.cellularName" :value="item.cellularCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" :label-width="labelWidth">
            <el-date-picker
              v-model="auditTime"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 90%;"
              format="yyyy-MM-dd HH:mm:ss"
              @change="timeChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button @click="onQuery" type="primary" :loading="querying" size="mini">查询</el-button>
          <el-button @click="reset" type="info" size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
